// 1.导入
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import Home from '../page/Home'
import News from '../page/News'
import User from '../page/User'
import NotFound from '../page/NotFound'

// 2.注册插件
Vue.use(VueRouter)

// 3.定义路由规则数组
let routes = [
    // 路由重定向
    {
        // 访问 / 自动跳转到 /home
        path:'/',
        redirect:'/home'
    },
    {
        // 路由路径
        path:'/home',
        name:'home',
        // 路由渲染的组件
        component:Home,
        // 路由元信息，作用是配置自定义的信息
        meta:{
            title:'首页'
        }
    },
    {
        path:'/news',
        name:'news',
        component:News,
        meta:{
            title:'新闻'
        }
    },
    {
        path:'/user',
        name:'user',
        component:User,
        meta:{
            title:'用户'
        }
    },
    // 404配置
    {
        path:'*',
        component: NotFound
    }
]

// 4.创建路由对象
let router = new VueRouter({
    // 路由规则数组
    routes:routes,
    // 路由模式 hash模式默认，带#，history模式不带#
    mode:'history',
    // 自定义路由导航高亮类名
    linkActiveClass:'active'
})

// 导出
export default router